<template>
  <div>
    <div class="header">
      <img src="../assets/images/fanhui.png" height="23" alt="" @click="back"/>
      <div>评分</div>
    </div>
    <div class="header-xx">
      <img src="../assets/images/服务评价.png" width="14" alt="" />
      <p>订单消息</p>
    </div>
    <div class="box-dd">
      <div v-for="(item,index) in arr" :key="index"><span>{{item}}</span> {{info[index]}}</div>
    </div>

    <div class="header-xx">
      <img src="../assets/images/服务评价.png" width="14" alt="" />
      <p>服务评价</p>
    </div>
    <div class="box-dd box-fw">
      <div>
        <span>描述想符</span>

        <img
          v-for="(item, index) in stars"
          :key="index"
          @click="btn1(index)"
          :src="item.src"
          width="25"
          height="25"
          alt=""
        />

        <span>{{ starNum * 2 }}分</span>
      </div>
      <div>
        <span>物流速度</span>
        <img
          v-for="(item, index1) in stars1"
          :key="index1"
          @click="btn2(index1)"
          :src="item.src"
          width="25"
          height="25"
          alt=""
        />
        <span>{{ starNum1 * 2 }}分</span>
      </div>
      <div>
        <span>服务质量</span>
        <img
          v-for="(item, index) in stars2"
          :key="index"
          @click="btn3(index)"
          :src="item.src"
          width="25"
          height="25"
          alt=""
        />
        <span>{{ starNum2 * 2 }}分</span>
      </div>
    </div>

    <div class="text">
      <textarea
        rows="10"
        cols="20"
        style="width: 100%; height: 100; box-sizing: border-box"
        placeholder="请填写评价"
        v-model="comment"
      >
      </textarea>
    </div>

    <div class="footer" v-show="bool">
      <div @click="btn4">提交评论</div>
    </div>
  </div>
</template>

<script>
import { Pingjiadan, EvaluateInfo, info } from "../request/api";
export default {
  data() {
    return {
      arr:['商品','发货时间','到达时间'],
      stars: [
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
      ],
      stars1: [
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
      ],
      stars2: [
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
        {
          src: require("../assets/images/评分-灰.png"),
          active: false,
        },
      ],
      starNum: 0,
      starNum1: 0,
      starNum2: 0,
      id: "",
      info: [],
      bool: true,
      comment: "",
    };
  },
  updated() {},
  created() {
    this.getParams();
    var serialNo = this.$route.params.id;
    info(serialNo).then((res) => {
      if (res.errCode == 0) {
        let data = res.data;
        this.info.push(data.prodName);
        this.info.push(data.sendTime);
        this.info.push(data.receiveTime);
      }
    });
    EvaluateInfo(serialNo).then((res) => {
      if (res.errCode == 0) {
        console.log(res);
        let {prodConformityPoint,logisticsSpeedPoint,serviceQualityPoint,comment} = res.data
        this.bool = false;
        this.starNum=prodConformityPoint
        this.starNum1=logisticsSpeedPoint
        this.starNum2=serviceQualityPoint
        this.comment=comment
        
      }
    });
  },
  watch: {
    $route: "getParams",
  },
  methods: {
    back(){
     this.$router.back() 
    },
    btn1(index) {
      var total = this.stars.length;
      var idx = index + 1;
      if (this.starNum == 0) {
        this.starNum = idx;
        for (var i = 0; i < idx; i++) {
          this.stars[i].src = require("../assets/images/评分-黄.png");
          this.stars[i].active = true;
        }
      } else {
        //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
        if (idx == this.starNum) {
          for (var i = index; i < total; i++) {
            this.stars[i].src = require("../assets/images/评分-灰.png");
            this.stars[i].active = false;
          }
        }
        //如果小于当前最高星级，则直接保留当前星级
        if (idx < this.starNum) {
          for (var i = idx; i < this.starNum; i++) {
            this.stars[i].src = require("../assets/images/评分-灰.png");
            this.stars[i].active = false;
          }
        }
        //如果大于当前星级，则直接选到该星级
        if (idx > this.starNum) {
          for (var i = 0; i < idx; i++) {
            this.stars[i].src = require("../assets/images/评分-黄.png");
            this.stars[i].active = true;
          }
        }
        var count = 0; //计数器-统计当前有几颗星
        for (var i = 0; i < total; i++) {
          if (this.stars[i].active) {
            count++;
          }
        }
        this.starNum = count;
      }
    },
    btn2(index) {
      var total = this.stars1.length;
      var idx = index + 1;
      if (this.starNum1 == 0) {
        this.starNum1 = idx;
        for (var i = 0; i < idx; i++) {
          this.stars1[i].src = require("../assets/images/评分-橙.png");
          this.stars1[i].active = true;
        }
      } else {
        //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
        if (idx == this.starNum1) {
          for (var i = index; i < total; i++) {
            this.stars1[i].src = require("../assets/images/评分-灰.png");
            this.stars1[i].active = false;
          }
        }
        //如果小于当前最高星级，则直接保留当前星级
        if (idx < this.starNum1) {
          for (var i = idx; i < this.starNum1; i++) {
            this.stars1[i].src = require("../assets/images/评分-灰.png");
            this.stars1[i].active = false;
          }
        }
        //如果大于当前星级，则直接选到该星级
        if (idx > this.starNum1) {
          for (var i = 0; i < idx; i++) {
            this.stars1[i].src = require("../assets/images/评分-橙.png");
            this.stars1[i].active = true;
          }
        }
        var count = 0; //计数器-统计当前有几颗星
        for (var i = 0; i < total; i++) {
          if (this.stars1[i].active) {
            count++;
          }
        }
        this.starNum1 = count;
      }
    },
    btn3(index) {
      var total = this.stars2.length;
      var idx = index + 1;
      if (this.starNum2 == 0) {
        this.starNum2 = idx;
        for (var i = 0; i < idx; i++) {
          this.stars2[i].src = require("../assets/images/评分-红.png");
          this.stars2[i].active = true;
        }
      } else {
        //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
        if (idx == this.starNum2) {
          for (var i = index; i < total; i++) {
            this.stars2[i].src = require("../assets/images/评分-灰.png");
            this.stars2[i].active = false;
          }
        }
        //如果小于当前最高星级，则直接保留当前星级
        if (idx < this.starNum2) {
          for (var i = idx; i < this.starNum2; i++) {
            this.stars2[i].src = require("../assets/images/评分-灰.png");
            this.stars2[i].active = false;
          }
        }
        //如果大于当前星级，则直接选到该星级
        if (idx > this.starNum2) {
          for (var i = 0; i < idx; i++) {
            this.stars2[i].src = require("../assets/images/评分-红.png");
            this.stars2[i].active = true;
          }
        }
        var count = 0; //计数器-统计当前有几颗星
        for (var i = 0; i < total; i++) {
          if (this.stars2[i].active) {
            count++;
          }
        }
        this.starNum2 = count;
      }
    },
    getParams() {
      var routerParams = this.$route.params.id;
      this.id = routerParams;
    },
    btn4() {
      Pingjiadan({
        serialNo: this.id,
        prodConformityPoint: this.starNum,
        logisticsSpeedPoint: this.starNum1,
        serviceQualityPoint: this.starNum2,
        comment: this.comment,
      }).then((res) => {
        if (res.errCode == 0) {
          console.log(res);
          this.$router.push("/home/funindex/dispatchList");
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
* {
  padding: 0;
  margin: 0;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  div {
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    margin: 8px 0 0 10px;
    border-radius: 22px;
    width: 355px;
    height: 44px;
    background: #1e3695;
  }
}
.text {
  width: 100%;
  height: 100px;
  padding: 10px 0 0 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
  background: #fff;
  input {
    width: 100%;
    border: none;
    outline: none;
  }
}

.box-fw {
  margin-bottom: 16px;
  div {
    position: relative;
    width: 100%;
    height: 55px;
    line-height: 55px;
    padding: 20px;
    box-sizing: border-box;
    img {
      margin-top: -6px;
    }

    span:nth-of-type(2) {
      width: 40px;
      text-align: center;
      position: absolute;
      right: 0;
    }
  }
}
.box-dd {
  padding: 20px 15px;
  box-sizing: border-box;
  background: #fff;
  div {
    color: #666666;
    width: 100%;
    display: flex;
    span {
      display: block;
      width: 100px;
      height: 20px;
      line-height: 20px;
      color: #979797;
    }
  }
}
.header-xx {
  color: #1f3694;
  display: flex;
  background: #f6f9fe;
  padding: 12px 15px;
  box-sizing: border-box;
  img {
    margin-right: 10px;
  }
}
.header {
  width: 100vw;
  height: 64px;
  background: #003399;
  display: flex;
  color: #fff;
  font-size: 22px;
  padding: 25px 10px;
  box-sizing: border-box;
  img {
    margin-top: 3px;
    margin-right: 140px;
  }
}
</style>